import { createBrowserRouter, RouterProvider, Outlet, useLocation, useNavigate } from 'react-router-dom';
import { Suspense, lazy } from 'react';
import { Button, Space, Spin } from 'antd';
import { Trap } from '../pages/Trap';
import { Calendar, CalendarDemo } from '../pages/Calendar';
import { MiniCalendarDemo } from '../pages/MiniCalendar';

// 懒加载页面组件
const Home = lazy(() => import('../pages/Home'));
const About = lazy(() => import('../pages/About'));
const NotFound = lazy(() => import('../pages/NotFound'));

// 布局组件
const Layout = () => {
  const navigate = useNavigate()

  // 路由跳转函数
  const routeTo = (path: string) => {
    navigate(path)
  };

  return (
    <div className="app-container">
      <Suspense fallback={<Spin size="large" className="global-loading" />}>
        <div>
          <Space>
            <Button type="primary" onClick={() => routeTo('/calendar')}>受控组件和非受控组件</Button>
            <Button type="primary" onClick={() => routeTo('/mini-calendar')}>日历</Button>
          </Space>
        </div>
        <Outlet />
      </Suspense>
    </div>
  );
};

// 创建路由配置
const router = createBrowserRouter([
  {
    path: '/',
    element: <Layout />,
    children: [
      {
        index: true,
        element: <Home />,
      },
      {
        path: 'trap',
        element: <Trap />
      },
      {
        path: 'about',
        element: <About />,
      },
      {
        path: 'calendar',
        element: <CalendarDemo />
      },
      {
        path: 'mini-calendar',
        element: <MiniCalendarDemo />
      },
      {
        path: '*',
        element: <NotFound />,
      },
    ],
  },
]);

// 路由提供者组件
const AppRouter = () => {
  return <RouterProvider router={router} />;
};

export default AppRouter;